<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.js" ></script>

<script>
    var vm = new Vue({
        data: {
            json: []
        },
        methods: {

        },

    })

</script>
<body>
<div>
				 <span > 区域
				</span>
    <select v-model="fruit" id="City" >
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        </option>
    </select>
    <!--<span>Selected：{{ fruit | json }}</span>-->


    <span > 产品定位
				<select v-model="selected" id="ProductType" >
				<option v-for="option in options" v-bind:value="option.value">
				  {{option.text}}
				 </option>

				</select>
			</span>
    <span > 是否现房销售
				<input type="checkbox" id="Present"  >
			</span>
</div>

<div>
    <p><b>基础信息</b></p>
    <span>占地面积</span> <input type="text"  width="50"   id="LandArea"  />
    <span>占地面积</span> <input type="text"  width="50"   id="BuildingArea"  />
    <span>容积率</span><input type="text"  width="50"  id="VolumetricRate"  />
    <span>可售比</span><input type="text" width="50"  id="SalesRatio"  />

    <BR>
    <span>名义楼板价</span><input type="text" width="50"  id="FloorRrice"  />
    <span>特殊成本可售单方</span><input type="text" width="50"  id="SpecialCost"  />
    <span>整盘均价（含精装）</span><input type="text" width="50"  id="HardcoverAveragePrice"  />
    <BR>
    <span>整盘均价（毛坯）</span><input type="text" width="50"   id="RoughcastAveragePrice" />
    <span>精装可售单方</span><input type="text" width="50"   id="HardcoverSaleUnilaterally" />

</div>

<div>
    <p><b>产品业态配比（按可售面积）</b></p>
    <table border="" cellspacing="" cellpadding="">
        <tr><th>业态</th>
            <th>沿街商业</th>
            <th>联排</th>
            <th>叠拼</th>
            <th>洋房</th>
            <th>小高层/高层</th></tr>
        <tr><td>业态占比(%)</td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
        </tr>
        <tr><td>精装占比(%)</td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
        </tr>
        <tr><td>精装标准(%)</td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
            <td><input type="text"></input> </td>
        </tr>
    </table>
</div>
<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">计算</button>
</div>
<div id="main">
    <p><b>速算结果</b></p>
    总投资:<label id="TotalInvestment" ></label>
    <br>
    总货值:<label id="TotalValue"></label>
    <br>
    净利润:<label id="NetRrofit"></label>
    <br>
    净利率:<label id="ProfitMargin"></label>
</div>

<script>
    var vm = new Vue({
        el: '#City',
        data: {
            fruit: '上海',
            options: [
                {text:'上海', value:'上海'},
                {text:'嘉兴', value:'嘉兴'},
                {text:'太仓', value:'太仓'},
                {text:'南通', value:'南通'}
            ]
        }
    })

    new Vue({
        el: '#ProductType',
        data: {
            selected: 'T',
            options: [
                {text:'T', value:'T'},
                {text:'G', value:'G'},
                {text:'H', value:'H'},
                {text:'L', value:'L'}
            ]
        }
    })
</script>
<script>
    var example2 = new Vue({
        el: '#example-2',
        methods: {
            greet: function (event) {
                 dt ={City:$('#City option:selected') .val(),BulidingType:$('#ProductType option:selected').val(),
                     Present: $('#Present').attr("value"),LandArea: $('#LandArea').val(),BuildingArea: $('#BuildingArea').val(),VolumetricRate: $('#VolumetricRate').val(),
                     SalesRatio: $('#SalesRatio').val(), FloorRrice: $('#FloorRrice').val(), SpecialCost: $('#SpecialCost').val(), HardcoverAveragePrice: $('#HardcoverAveragePrice').val(),
                     RoughcastAveragePrice: $('#RoughcastAveragePrice').val(), HardcoverSaleUnilaterally: $('#HardcoverSaleUnilaterally').val(),}
                     $.getJSON("/landValue",
                    dt,
                    function (result, status) {
                        $('#TotalInvestment').text(   result.totalInvestment.toFixed(2));
                        $('#TotalValue').text( result.totalValue.toFixed(2));
                        $('#NetRrofit').text( result.netRrofit.toFixed(2));
                        $('#ProfitMargin').text( result.profitMargin.toFixed(2));
                });

            }
        }
    })
</script>
</body>
</html>
